<template>
    <g-form-wrap :title="title" :on-save-btn-click="onSaveBtnClick">
        <el-form
            ref="ruleForm"
            :model="formData"
            :rules="formRules"
            label-position="left"
            label-width="140px"
            inline
        >
            <div class="w-full">
                <el-row type="flex">
                    <el-col :span="12">
                        <el-form-item label="调研年度：" prop="qnYear">
                            <el-input
                                v-model="formData.qnYear"
                                placeholder="请输入调研年度"
                                class="edit-item"
                                type="number"
                                clearable
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="调研模板：" prop="researchDatastatus">
                            <g-select
                                v-model="formData.researchDatastatus"
                                placeholder="请选择调研模板"
                                class="edit-item"
                                :options="[
                                    { id: 1, name: '有限合伙人-2023Q1' },
                                    { id: 2, name: '政府引导基金-2023Q1' },
                                    { id: 3, name: 'TOP100-2023Q1' }
                                ]"
                                :filterable="true"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex">
                    <el-col :span="12">
                        <el-form-item label="调研类型：" prop="researchDatastatus">
                            <g-select
                                v-model="formData.researchDatastatus"
                                placeholder="请选择调研类型"
                                class="edit-item"
                                :options="[
                                    { id: 1, name: '有限合伙人排名' },
                                    { id: 2, name: '政府引导基金排名' },
                                    { id: 3, name: '中国股权投资排名' },
                                    { id: 4, name: '投资界TOP100投资人排名' }
                                ]"
                                :filterable="true"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="特殊数据范围年限：" prop="qnYear">
                            <el-input-number
                                v-model="formData.qnYear"
                                placeholder="请输入特殊数据范围年限"
                                class="edit-item"
                                controls-position="right"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex">
                    <el-col :span="12">
                        <el-form-item label="反馈邮箱：" prop="qnEmail">
                            <el-input
                                v-model="formData.qnEmail"
                                placeholder="请输入反馈邮箱"
                                class="edit-item"
                                clearable
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="反馈电话：" prop="qnTel">
                            <el-input
                                v-model="formData.qnTel"
                                placeholder="请输入反馈电话"
                                class="edit-item"
                                clearable
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex">
                    <el-col :span="12">
                        <el-form-item label="调研时间：" prop="qnEmail">
                            <el-input
                                v-model="formData.qnEmail"
                                placeholder="请输入调研时间"
                                class="edit-item"
                                clearable
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="数据范围：" prop="qnTel">
                            <el-input
                                v-model="formData.qnTel"
                                placeholder="请输入数据范围"
                                class="edit-item"
                                clearable
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex">
                    <el-col :span="24">
                        <el-form-item label="关于本次调研：" prop="qnTel">
                            <el-input
                                v-model="formData.qnTel"
                                placeholder="请输入关于本次调研"
                                :rows="4"
                                type="textarea"
                                class="edit-item"
                                clearable
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
        </el-form>
    </g-form-wrap>
    <g-form-wrap title="调研涉及榜单" :on-save-btn-click="onSaveBtnClick" />
    <g-form-wrap title="调研涉及报告" :on-save-btn-click="onSaveBtnClick" />
</template>

<script lang="ts" setup>
import { reactive, ref, toRefs } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import type { Loading } from '@/components/Dialog/types'
import { useRoute, useRouter } from 'vue-router'
import elv from '@/utils/elValidation'
import { getResearchOrgByIdApi, addResearchOrgApi, updateResearchOrgApi } from '@/api/admin'
import { Page } from '@/types/storeModule'
import { assign, cloneDeep, omit } from 'lodash-es'

const route = useRoute()
const router = useRouter()
const isEditing = ref(false)
const ruleForm = ref<FormInstance>()
let options = ref<any>([])
let formData = ref(<
  {
    researchOrgId: string | number
    researchOrgName: string
    researchDatastatus: string | number
  }
>{
	researchOrgId: 0,
	researchOrgName: '',
	researchDatastatus: 1
})
const formRules = reactive<FormRules>({
	researchOrgName: [{ required: true, message: '请输入调研机构名称', trigger: 'change' }]
})
const id = route.query.id as string | number
const title = route.meta.title as string
isEditing.value = id > 0 ? true : false
// 编辑时
if (isEditing.value) {
	const getResearchOrgByIdFunc = async () => {
		const data = await getResearchOrgByIdApi(Number(id))
		console.log('data---', data)
		const filteredData = cloneDeep(omit(data, ['History', 'history', 'repeatKeys'])) as {
      researchOrgId: string | number
      researchOrgName: string
      researchDatastatus: string | number
    }
		formData.value = {
			researchOrgId: filteredData.researchOrgId || 0,
			researchOrgName: filteredData.researchOrgName || '',
			researchDatastatus: filteredData.researchDatastatus || 1
		}
	}
	getResearchOrgByIdFunc()
}
// 保存提交
const onSaveBtnClick = (loading: Loading) => {
	ruleForm.value?.validate(async (valid: boolean): Promise<void> => {
		if (valid) {
			loading(true)
			if (isEditing.value) {
				// console.log('formData---update', formData);
				updateResearchOrgApi(formData.value).then((res) => {
					// console.log('res---update', res);
					if (res * 1 === 200) ElMessage.success('编辑成功')
				})
			} else {
				// console.log('formData---add', formData);
				addResearchOrgApi(formData.value).then((res) => {
					// console.log('res---add', res);
					if (res * 1 === 201) ElMessage.success('添加成功')
				})
			}
			setTimeout(() => {
				loading(false)
				router.back()
			}, 100)
		} else {
			return
		}
	})
}
</script>
